<template>
  <div class="search-box">
    <input 
      v-model="searchQuery"
      @keyup.enter="handleSearch"
      placeholder="搜索书籍..."
      class="input search-input"
    />
    <button @click="handleSearch" class="btn search-btn">搜索</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useBookStore } from '@/stores/book'
import { useRouter } from 'vue-router'

const bookStore = useBookStore()
const router = useRouter()
const searchQuery = ref('')

const handleSearch = async () => {
  if (searchQuery.value.trim()) {
    await bookStore.searchBooks(searchQuery.value.trim())
    if (router.currentRoute.value.name !== 'Library') {
      router.push('/library')
    }
  } else {
    await bookStore.fetchBooks()
  }
}
</script>

<style scoped>
.search-box {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-input {
  width: 200px;
  margin: 0;
}

.search-btn {
  white-space: nowrap;
}
</style>